<template>
    <view class="page">
        <view class="evaluate-goods">
            <view class="list">
                <view class="picture">
                    <image :src="data.goods_cover||data.cover_pict"></image>
                </view>
                <view class="item">
                    <view class="title">
                        <text>{{data.goods_name || data.name}}</text>
                    </view>
                    <view class="star-list">
                        <u-rate :count="count" v-model="form.grade" active-color="#2e996f"></u-rate>
                        <view class="hint">
                            <text v-if="form.grade==1">非常差</text>
                            <text v-else-if="form.grade==2">差</text>
                            <text v-else-if="form.grade==3">一般</text>
                            <text v-else-if="form.grade==4">好</text>
                            <text v-else-if="form.grade==5">非常好</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!--填写-->
        <view class="input-info">
            <view class="input-title">
                <text>分享你的使用体验吧</text>
            </view>
            <view class="input-text">
                <textarea v-model="form.content" maxlength="500" placeholder="感觉怎么？跟大家分享一下吧~"></textarea>
                <view class="record-text">
                    <text>已写</text>
                    <text class="ac">{{ form.content?form.content.length:0 }}</text>
                    <text>个字</text>
                </view>
            </view>
            <view class="anonymous">
                <!-- <radio class="radio" :checked="isChecked" @change="changeAnon" color="red" style="transform:scale(0.7)"></radio>
                <text>匿名评价</text> -->
                <u-checkbox-group activeColor="#2e996f">
                    <u-checkbox @change="checkboxChange" v-model="isChecked" shape="circle">
                        匿名评价
                    </u-checkbox>
                </u-checkbox-group>
            </view>
        </view>

        <!--上传图片-->
        <view class="upload-img">
            <view class="img-title">
                <text>上传图片/视频</text>
            </view>
            <!-- 多图仅支持图片 -->
            <!-- <xzl-upload :show-progress="true" :upload-text="uploadText" multiple ref="uUpload" :header="header" :action="action" :auto-upload="true"
                :max-size="2* 1024 * 1024" @on-change="onChoose" name="encryption" max-count="9" :fileList="fileList" @on-list-change="onListChange"
                @on-uploaded="onUploaded" @on-progress="progress" @on-remove="remove" @befordelIndex="befordelIndex">
            </xzl-upload> -->

            <multifile-upload :max="6" v-model="fileList" mediaType="all" :maxSize="4" :chooseNum="9" :maxDuration="6" :sourceType="['album','camera']"
                :compress="false" :quality="80" :formData="{'file': '123'}" :remove="true" @uploadSuccess="fileUploadSuccess1" @imgDelete="fileImgDelete"
                @uploadFail="fileUploadFail" action="https://yl.weilankangyang.com/api/common/fileUpload"></multifile-upload>

        </view>
        <!--提交-->
        <view class="submit-btn">
            <view class="btn" @click="submit">
                <text>提交</text>
            </view>
        </view>
    </view>
</template>

<script>
import { evaluate } from "@/api/my/orderList.js"
export default {
    data() {
        return {
            isChecked: false,
            data: {},
            count: 5,
            value: 0,

            // action: 'https://yl.weilankangyang.com/api/common/fileUpload',//后端地址,本人的上传图片服务用的nodejs服务需要联系我
            // header: {
            //     "token": uni.getStorageSync('token') ? uni.getStorageSync('token') : ''
            // },
            // FormData: [],
            // uploadText: '上传图片',
            // fileList: [],
            // delIndex: '',
            fileList: [],
            form: {
                grade: 0,
                is_anon: 0,
            },
            list: [
                {
                    name: '匿名评价',
                    checked: false,
                    disabled: false
                },
            ]
        };
    },
    onLoad(query) {
        if (query.data) {
            this.data = JSON.parse(decodeURIComponent(query.data))
            console.log(this.data, "this.data")
        }
        if(query.key){
            uni.setNavigationBarTitle({
                title: "服务评价"
            })
           this.data = JSON.parse(decodeURIComponent(query.key))
           console.log(this.data, "this.data")
        }
    },
    methods: {
        // 选中某个复选框时，由checkbox时触发
        checkboxChange(e) {
            console.log(e);
            if (e.value) {
                this.form.is_anon = 1
            } else {
                this.form.is_anon = 0
            }
        },

        // onChoose() {
        //     //获取图片路径
        //     let imgpat = this.$refs.uUpload.lists;
        //     this.FormData = imgpat
        // },
        // onListChange(list, name) {
        //     this.$emit('change', list)
        // },
        // onUploaded(list, name) {
        //     // < !--该list包含服务器返回的res和进度条的信息可根据自己条件获取 -->
        //     console.log('完成图片上传', list, name);
        //     this.$emit('changeSuccess', list)
        // },
        // remove(index, lists) {
        //     this.$emit('removeImg', this.delIndex)
        // },
        // progress(res, index, lists, name) {
        //     this.fileList = lists
        //     console.log('进度', res.progress, index, lists);
        // },
        // befordelIndex(index) {
        //     // < !--该方法是本人新增  功能时获取删除之前时该图片索引，方便用户删除，然后通过remove方法抛出去-- >
        //     this.delIndex = index
        // },

        fileUploadSuccess1(res) { //上传成功
            /****************
            因为上传接口返回的结构不一致，所以以下代码需要根据实际的接口返回结构开发，在此只是展示如果给数组里添加的过程，仅供参考
            ***************/
            var _res = JSON.parse(res.data);
            console.log('_res', _res)
            if (_res.code == 1) {
                this.fileList.push(_res.data[0].fileurl);
            }
            /*******************************/
        },
        fileImgDelete(e) {
            console.log('fileImgDelete', e)
        },
        fileUploadFail(err) { //上传失败
            console.log('err', err)
        },

        submit() {
            if (this.form.grade < 1) {
                uni.showToast({
                    title: '请评价商品~',
                    icon: 'none'
                });
                return
            }
            if (!this.form.content) {
                uni.showToast({
                    title: '请输入评价内容~',
                    icon: 'none'
                });
                return
            }
            this.form.order_no = this.data.order_no ? this.data.order_no : ''
            this.form.goods_sku = this.data.goods_sku
            this.form.picture = this.fileList.length > 0 ? this.fileList.join("|") : ""
            evaluate(this.form).then(res => {
                if (res.code == 1) {
                    this.$message("评价成功~")
                    setTimeout(() => {
                        // uni.navigateBack({
                        //     delta: 1,
                        // })
                        uni.reLaunch({
                            url: '/pagesA/my/myOrderList'
                        })
                    }, 1000)
                }
            })
        },
    }
}
</script>

<style scoped lang="scss">
.page {
  padding-bottom: 50rpx;
}
.evaluate-goods {
  padding: 0 30rpx;
  background-color: #ffffff;
  border-radius: 0 0 20rpx 20rpx;
  .list {
    display: flex;
    align-items: center;
    width: 100%;
    height: 160rpx;
    .picture {
      width: 120rpx;
      height: 120rpx;
      margin-right: 20rpx;
      image {
        width: 100%;
        height: 100%;
        border-radius: 10rpx;
      }
    }
    .item {
      height: 120rpx;
      .title {
        display: flex;
        align-items: center;
        height: 60rpx;
        color: #222222;
      }
      .star-list {
        display: flex;
        align-items: center;
        .hint {
          display: flex;
          align-items: center;
          margin-left: 40rpx;
          text {
            font-size: 26rpx;
            color: $base;
          }
        }
      }
    }
  }
}
/*填写*/
.input-info {
  padding: 0 30rpx;
  margin: 30rpx auto;
  background-color: #ffffff;
  border-radius: 20rpx;
  .input-title {
    display: flex;
    align-items: center;
    width: 100%;
    height: 80rpx;
    border-bottom: 1px solid #f6f6f6;
    text {
      font-size: 26rpx;
      color: #222222;
    }
  }
  .input-text {
    width: 100%;
    height: 280rpx;
    padding: 20rpx 0;
    textarea {
      width: 100%;
      height: 200rpx;
      font-size: 24rpx;
      color: #222222;
    }
    .record-text {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 100%;
      height: 40rpx;
      border-top: 1px solid #f6f6f6;
      text {
        font-size: 24rpx;
        color: #999999;
        padding-top: 20rpx;
      }
      .ac {
        color: $base;
      }
    }
  }
  .anonymous {
    display: flex;
    align-items: center;
    width: 100%;
    height: 80rpx;
    text {
      margin-left: 20rpx;
      font-size: 26rpx;
      color: #222222;
    }
  }
}

/*上传图片*/
.upload-img {
  padding: 0 30rpx;
  margin: 30rpx auto;
  background-color: #ffffff;
  border-radius: 20rpx;
  .img-title {
    display: flex;
    align-items: center;
    width: 100%;
    height: 80rpx;
    text {
      font-size: 26rpx;
      color: #222222;
    }
  }
  .img-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    height: 200rpx;
    .list {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 23%;
      height: 160rpx;
      margin-right: 2%;
      image {
        width: 160rpx;
        height: 160rpx;
        border-radius: 10rpx;
      }
      text {
        position: absolute;
        right: -10rpx;
        top: -20rpx;
        font-size: 34rpx;
        color: #707070;
      }
    }
    .list:nth-child(4n) {
      margin-right: 0;
    }
    .up-img {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24%;
      height: 160rpx;
      box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
      border-radius: 10rpx;
      margin-right: 2%;
      image {
        width: 60rpx;
        height: 60rpx;
      }
    }
  }
}
/*提交*/
.submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100rpx;
  margin-top: 100rpx;
  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    height: 70rpx;
    background: linear-gradient(to right, $base, $change-clor);
    box-shadow: 0 0 10rpx $base;
    border-radius: 80rpx;
    text {
      font-size: 28rpx;
      color: #ffffff;
    }
  }
}
</style>
